<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人空间</title>
    <link rel="stylesheet" href="../css/theme.css">
    <style>
        body {
            background-color: #F4F5F7;
        }

        .blogs {
            width: 1000px;
            margin: 50px auto;
        }

        .blogs li {
            border: 1px solid grey;
            padding: 20px;
            background-color: white;
            border-radius: 5px;
            margin: 20px auto;
        }

        .blog_item_top {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

        .blog_item_btns {
            width: fit-content;
        }

        .blog_item_btns button {
            font-size: 20px;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            margin: auto 10px;
        }

        .blog_item_btns button:first-child {
            background-color: black;
            color: white;
        }

        .blog_item_btns button:last-child {
            background-color: red;
            color: white;
        }

        .blog_item_desc {
            margin: 20px auto;
        }

        .blog_item_body {
            display: flex;
            margin-top: 20px;
        }

        .blog_item_body img {
            width: 150px
        }

        .blog_info {
            width: 830px;
            margin-left: 20px;
        }

        .blog_info span {
            float: right;
            font-size: 14px;
            margin-top: -10px;
        }

        .addBlog {
            display: block;
            position: fixed;
            right: 20px;
            width: 60px;
            background-size: 100% 100%;
            height: 60px;
            background-image: url(../img/blog_cover.png);
            top: 20px;
        }
    </style>
</head>

<body>
    <h1>LXQ博客后台管理</h1>
    <ul class="blogs" id="blogs">
        <li v-for="blog in blogs">
            <div class="blog_item_top">
                <h2>{{blog.title}}</h2>
                <div class="blog_item_btns">
                    <button>
                        <a :href="'blog_update.html?id='+blog.id" target="_blank">修改</a>
                    </button>
                    <button>
                        <a :href="'/blog_detail.html?id='+blog.id" style="color: black;" target="_blank">浏览</a>
                    </button>
                    <button v-on:click="deleteBlog(blog.id)">删除</button>
                </div>
            </div>
            <div class="blog_item_body">
                <img :src="blog.cover" alt="">
                <div class="blog_info">
                    <span>发布日期：{{blog.date}} | 阅读量：{{blog.reading}} | 点赞：{{blog.thumb}}</span>
                    <p class="blog_item_desc">{{blog.description}}</p>
                </div>
            </div>
        </li>
    </ul>
    <a target="_blank" title="添加内容" class="addBlog" href="blog_edit.html"></a>
    <script src="../js/vue.min.js"></script>
    <script>
        fetch('/blogs', { method: 'get' }).then(resp => {
            resp.json().then(blogData => {
                new Vue({
                    el: '#blogs',
                    data: {
                        blogs: blogData
                    }, methods: {
                        deleteBlog: function (id) {
                            fetch('/user/blog/delete/' + id, { method: 'delete' }).then(resp => {
                                resp.json().then(data => {
                                    if (data.result) {
                                        document.location.href = '/userzone/user.html'
                                    } else {
                                        alert('删除失败')
                                    }
                                })

                            }).catch(err => alert('网络错误：' + err))
                        }
                    }
                })
            })
        })
    </script>
</body>

</html>